<template>
    <Form ref="formCom" :validation-schema="mySchema" v-slot="{errors}" class="xtx-form" autocomplete="off">
        <div class="xtx-form-item">
            <div class="field">
                <i class="icon iconfont icon-user"></i>
                <Field :class="{err:errors.account}" v-model="form.account" name="account" class="input" type="text" placeholder="请输入用户名" />
            </div>
            <div v-if="errors.account" class="error">{{errors.account}}</div>
        </div>
        <div class="xtx-form-item">
            <div class="field">
                <i class="icon iconfont icon-phone"></i>
                <Field v-model="form.mobile" name="mobile" class="input" type="text" placeholder="请输入手机号" />
            </div>
            <div v-if="errors.mobile" class="error">{{errors.mobile}}</div>
        </div>
        <div class="xtx-form-item">
            <div class="field">
                <i class="icon iconfont icon-code"></i>
                <Field v-model="form.code" name="code" class="input" type="text" placeholder="请输入验证码" />
                <span @click="send()" class="code">{{time===0?'发送验证码':`${time}秒后发送`}}</span>
            </div>
            <div v-if="errors.code" class="error">{{errors.code}}</div>
        </div>
        <div class="xtx-form-item">
            <div class="field">
                <i class="icon iconfont icon-lock"></i>
                <Field v-model="form.password" name="password" class="input" type="password" placeholder="请输入密码" />
            </div>
            <div v-if="errors.password" class="error">{{errors.password}}</div>
        </div>
        <div class="xtx-form-item">
            <div class="field">
                <i class="icon iconfont icon-lock"></i>
                <Field v-model="form.rePassword" name="rePassword" class="input" type="password" placeholder="请确认密码" />
            </div>
            <div v-if="errors.rePassword" class="error">{{errors.rePassword}}</div>
        </div>
        <a @click="submit" href="javascript:;" class="submit">立即提交</a>
    </Form>
</template>

<script>
import { Form,Field  } from "vee-validate";
import schema from "@/utils/vee-validate-schema";
import Message from "@/components/library/Message";
import { onUnmounted, reactive, ref } from 'vue';
import { useIntervalFn } from '@vueuse/core';
import { userQQPatchCode, userQQPatchLogin } from '@/api/user';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
export default {
    name: "CallbackPatch",
    components:{Form,Field},
    props:{
        unionId:{
            type:String,
            default:''
        },
    },
    setup(props){
        // 表单
        const form = reactive({
            account:null,
            mobile:null,
            code:null,
            password:null,
            rePassword:null
        })
        // 校验规则
        const mySchema = {
            account:schema.accountApi,
            mobile:schema.mobile,
            code:schema.code,
            password:schema.password,
            rePassword:schema.rePassword
        }
        // 发送验证码
        // 发送验证码
        // pause暂停, resume开始
        // useIntervalFn(回调函数，执行间隔，是否立即开启)
        const time = ref(0)
        const { pause, resume } = useIntervalFn(()=>{
            time.value--
            if (time.value<=0) {
                pause()
            }
        },1000,false)
        // 清除定时器
        onUnmounted(()=>{
            pause()
        })
        const formCom = ref(null)
        const send = async () =>{
            const valid = schema.mobile(form.mobile)
            if (valid === true) {
                if (time.value === 0) {
                    await userQQPatchCode(form.mobile)
                    Message({type:'success',text:'发送成功'})
                    // 开启倒计时
                    time.value = 60
                    resume()
                }
            }else{
                // 失败时 使用vee-validate的错误信息
                formCom.value.setFieldError('mobile',valid)
            }
        }
        const route = useRoute()
        const router = useRouter()
        const store = useStore()
        // 立即绑定
        const submit = async () =>{
            const valid = await formCom.value.validate()
            if (valid) {
                try{
                    const data = await userQQPatchLogin({unionId:props.unionId,...form})
                    const {id,account,avatar,mobile,nickName,token} = data.result
                    store.commit('user/setUser',{id,account,avatar,mobile,nickName,token})
                    // 跳转
                    router.push(route.query.redirectUrl || '/')
                    // 提示
                    Message({type:'success',text:'完善信息成功'})
                }catch(e){
                    if (e.response.data) {
                        Message({type:'error',text:e.response.data.message || '完善信息失败'})
                    }
                }
            }
        }
        return { form,mySchema,formCom,send,time,submit }
    }
};
</script>

<style scoped lang='less'>
.code {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 50px;
    width: 80px;
    color: #999;
    &:hover {
        cursor: pointer;
    }
}
</style>